<template>
	<view class="content">
		<uni-row class="demo-uni-row">
			<uni-col class="demo-uni-col">
				<uni-section :title="langDict" type="line" titleFontSize="18px">
					<uni-card is-full :is-shadow="true">
						<text class="dict-content">{{ content }}</text>
					</uni-card>
				</uni-section>
			</uni-col>
			<mp-html @load="onmount" content="-" ref="mphtml"></mp-html>
		</uni-row>
	</view>
</template>

<script>
	import mpHtml from 'components/mp-html/mp-html';
	import Parser from 'components/mp-html/parser.js';

	async function loadHtml(title) {
		try {
			const res = await uni.request({
				// url:'https://dict.youdao.com/result?lang=en&word='+title,
				url: `/word?title=${title}`,
				// url:'static/test.html',
				method: 'GET'
			});
			if (res.statusCode === 200) {
				console.log('loadHtml!');
			} else {
				console.error('Failed to fetch HTML content');
			}
			return res.data
		} catch (error) {
			console.error('Error fetching HTML content:', error);
		}
	}

	async function saveContent(data) {
		try {
			const res = await uni.request({
				url: '/save',
				method: 'POST',
				dataType: "json",
				data: data,
				responseType: "json",
				header: {
					"Content-Type": "application/json",
				}
			});
			if (res.statusCode === 200) {
				console.log('save!');
			} else {
				console.error('Failed to fetch HTML content');
			}
			return res.data
		} catch (error) {
			console.error('Error fetching HTML content:', error);
		}
	}

	export default {
		data() {
			return {
				title: "",
				content: "",
				langDict: '有道词典',
				extractedText: [],
				id: ""
			};
		},
		methods: {
			onLoaddata: function() {
				console.log('load data 2');
				var className = ["simple dict-module", "sents-part", "trans-container ee dict-book column",
					"part-phrs column"
				]
				if (this.content == "")
					loadHtml(this.title).then((res) => {
						console.log('loadHtml', this.title);
						this.extractTextFromNodes(this._nodes.parse(res), className);
						this.content = this.$refs.mphtml.getText(this.extractedText).replace("语速\n0.5x\n1.0X\n1.5X\n发音\n英式发音\n美式发音\n","")

						var sData = {
							id: this.$data._id,
							content: this.content,
							lang: this.lang
						}
						saveContent(sData).then((v) => {
							console.log(v);
						})
					});
			},
			onmount: function(e) {
				console.log('onmount');
				this._nodes = new Parser(this.$refs.mphtml)
			},

			extractTextFromNodes: function(nodes, cName) {
				for (const node of nodes) {
					if (node.attrs && node.attrs.class && (node.attrs.class == "modules")) {
						// this.extractTextFromNodes(node.children, cName);
						this.extractedText.push(node);
						continue;
						// if (node.attrs && node.attrs.class && className.indexOf(node.attrs.class)>=0 ) {
						// debugger
						// break;
					}
					// else if (node.attrs && node.attrs.class && (cName.indexOf(node.attrs.class) >= 0)) {
					// 	this.extractedText.push(node);
					// } 
					else if (node.children && node.children.length) {
						this.extractTextFromNodes(node.children, cName);
					}
				};
			},
		},
		onLoad: function(e) {
			if (e.lang == 'zh') this.langDict = '汉典'

			// debugger
		},
	}
</script>
<style>
	@import "./index.css";

	.content {
		/* text-align: center; */
		margin: 10px auto;
		font-size: 16px;
	}

	.dict-content {
		line-height: 2;
	}
</style>